<template>
    <div>
<el-table :data="tableData" border style="width: 100%">
         <el-table-column prop="name" label="姓名">
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="text" v-if="scope.row.state === 1" size="small" 
               @click="getShelves(scope.row)">上架</el-button>
             <template>
               <el-popover placement="top-start" title="标题" width="200" v-model="scope.row.temp"
                 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                 <el-button>我知道了</el-button>
                 <el-button type="text" @click="offPopover(scope.row)" slot="reference">下架</el-button>
               </el-popover>
             </template>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </template>
<script setup>
import { ref } from "vue";
const tableData = ref([])

let arr = [{
  name: '王小虎',
  state: 1
}, {
  name: '王小虎',
  state: 0
}]
for (const item of arr) {
  item.temp = false
}
tableData.value = arr 
const getShelves = (row) => {
  row.temp = true
}
const offPopover = row => {
  row.temp = false
}
</script>
<style lang="scss" scoped></style>